<template>
  <div class="main">
    <div class="user-title">{{ friends.comments || friends.name }}</div>
    <div class="contex">
      <div v-for="item in messages" :key="item.createtime">
        <div class="createTime">
          {{ item.createtime }}
        </div>
        <div
          :class="
            item.senduserid == userId
              ? 'message-context-right'
              : 'message-context-left'
          "
        >
          <div class="photo">
            <el-avatar
              shape="square"
              :size="50"
              :src="item.senduserid == userId ? photo : friendphoto"
            ></el-avatar>
          </div>
          <div
            :class="
              item.senduserid == userId ? 'chatBox-right' : 'chatBox-left'
            "
          >
            <div v-if="item.type == 0">
              {{ item.context }}
            </div>
            <div v-else class="download">
              <a :href="item.context" title="下载" class="download">下载</a>
              <img src="../assets/wjj.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fooder">
      <el-button type="success" @click="fileMessage">分享文件</el-button>
      <el-input placeholder="输入文字消息" v-model="context"></el-input>
      <el-button type="success" @click="send" @keyup.enter="send"
        >发送</el-button
      >
    </div>
    <friendsMove
      ref="friends"
      :filedir="base_file"
      @send="sendFile"
    ></friendsMove>
  </div>
</template>
<script>
import friendsMove from "../components/friends/FriendsMove";
import { mapState } from "vuex";
export default {
  name: "Message",
  props: { friends: {} },
  components: { friendsMove },
  data() {
    return {
      context: null,
      messages: [],
      userphoto: `${this.photo}`,
      friendphoto: `${process.env.VUE_APP_SERVER_HOST}${this.friends.photo}`,
    };
  },
  computed: {
    ...mapState(["userId", "photo","ws"]),
    base_file() {
      return this.userId + "/";
    },
  },
  created() {
    console.log(this.ws);
    this.getmessage();
    this.ws.onopen = (e) => {
      // console.log("连接成功");
    };
    this.ws.onmessage = (e) => {
      // console.log(`接收到:${e.data}`);
      this.messages.unshift(JSON.parse(e.data));
    };
    this.ws.onclose = (e) => {
      // console.log(`连接断开`);
    };
  },
  methods: {
    fileMessage() {
      this.$refs.friends.open(`${this.userId}/`);
    },
    send() {
      if (this.context) {
        let message = {
          senduserid: this.userId,
          receive: this.friends.id,
          context: this.context,
          createtime: this.getTime(),
          type: 0,
        };
        this.context = null;
        this.messages.unshift(message);
        this.ws.send(JSON.stringify(message));
      }
    },
    sendFile(context) {
      let message = {
        senduserid: this.userId,
        receive: this.friends.id,
        context: context,
        createtime: this.getTime(),
        type: 1,
      };
      this.messages.unshift(message);
      this.ws.send(JSON.stringify(message));
    },

    getmessage() {
      this.$https
        .get("/message", {
          params: {
            userId: this.userId,
            friendsId: this.friends.id,
            page: 1,
            size: 10,
          },
        })
        .then((d) => {
          if (d.code == 200) {
            this.messages = d.data;
          }
        })
        .catch((e) => {});
    },

    getTime() {
      var date = new Date();
      var fullYear = date.getFullYear();
      var month = date.getMonth() + 1;
      var ms = month < 10 ? "-" + "0" + month : "-" + month;
      var day = date.getDate();
      var ds = day < 10 ? "-" + "0" + day : "-" + day;
      var rs = fullYear + ms + ds;
      var time = date.getHours();
      if (time < 10) {
        rs += " 0" + time;
      } else {
        rs += " " + time;
      }
      var minutes = date.getMinutes();
      var min = minutes < 10 ? ":0" + minutes : ":" + minutes;
      var seconds = date.getSeconds();
      var sed = seconds < 10 ? ":0" + seconds : ":" + seconds;
      rs += min + sed;
      return rs;
    },
    keyDown(e) {
      if (e.keyCode === 13) {
        this.send();
      }
    },
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown);
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
};
</script>
<style scoped lang="scss">
.main {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.user-title {
  height: 5%;
  background-color: rgb(216, 211, 205);
  display: flex;
  justify-content: center;
  align-items: center;
}
.contex {
  height: 90%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;
}
.createTime {
  text-align: center;
  font-size: 30;
  color: rgb(109, 101, 101);
}
.fooder {
  height: 5%;
  display: flex;
}
.photo {
  margin: 10px;
}
.message-context-left {
  margin-top: 20px;
  display: flex;
}
.message-context-right {
  margin-top: 20px;
  display: flex;
  flex-direction: row-reverse;
}
.chatBox-left {
  position: relative;
  margin: 12px;
  padding: 5px 8px;
  word-break: break-all;
  background: rgb(226, 221, 221);
  border: 1px solid rgb(230, 224, 224);
  border-radius: 5px;
  max-width: 180px;
}
.chatBox-left::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: -20px;
  top: 5px;
  border: 10px solid;
  border-color: transparent rgb(216, 210, 210) transparent transparent;
}
.chatBox-right {
  position: relative;
  margin: 12px;
  padding: 5px 8px;
  word-break: break-all;
  background: rgb(226, 221, 221);
  border: 1px solid rgb(230, 224, 224);
  border-radius: 5px;
  max-width: 180px;
}
.chatBox-right::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  right: -20px;
  top: 5px;
  border: 10px solid;
  border-color: transparent transparent transparent rgb(216, 210, 210);
}
.download {
  display: flex;
  align-items: center;
}
</style>